<template>
	<view class="">
		<view class="headerBox paddingLR32">
			<view class="flexJBC header" :style="{paddingTop:'80rpx'}" >
				<u-icon name="arrow-left" size="40rpx" color="#fff" @click="$my.go()"></u-icon>
				<view class="fw7 cof" style="font-size: 40rpx;">
					上新精选   
				</view>
				<view class="">
					<!-- <u-icon name="search" size="48rpx" color="#fff"></u-icon> -->
				</view>
			</view>
			<view class="newsBox mt24"  v-if="topList.length>0">
				<view class="flexJBC" style="align-items: flex-start;">
					<view class="week fontS32 fw7">
						每周精选
					</view>
					<view class="flex paddingLR32 mt24" @click="$my.go('/pages/index/weekChoiceness?id='+id)">
						<view class="fontS24 co9">
							更多 
						</view> 
						<u-icon name='arrow-right' size="24rpx" color="#999"></u-icon>
					</view>
				</view>
				<view class="lis paddingLR24 mt24">
					<scroll-view scroll-x="true" @scrolltolower='getTopList(true)'>
						<view class="flex" style="flex-wrap: nowrap;">
							<view v-for="(item,index) in topList" :key="index" style="margin-right: 20rpx;"  @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)">
								<u-image :src="item.image" :lazy-load="true"
									width="144rpx" height="144rpx" radius="10rpx">
								</u-image>
								<view class="homeRed center mb24 fontS24" style="margin-top: 16rpx;">
									￥{{item.price}} 
								</view>
							</view>  
						</view> 
					</scroll-view>   
				</view>
			</view>
		</view>
		<!-- 吸顶 -->
		<!-- <u-sticky customNavHeight='80rpx' zIndex='99999'> -->
			<view class="lisBox" >
				<u-tabs :current='tabsActive' :list="tabs" @click="getList" :activeStyle="{color:$store.state.homeRed }" keyName='cate_name'
					:itemStyle="{color: '#999', fontSize:'32rpx',lineHeight:'80rpx',}" lineColor="#DD2131"> 
				</u-tabs>
				<view class="padding32">
					<List :showTopTitle='false' type='2' :list="list" v-if="list.length>0"/>
				</view>
			</view>
		<!-- </u-sticky> -->
	</view>
</template>

<script>
	import List from '@/componentes/list.vue'
	export default {
		components: {
			List
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		methods:{
			getTopList(val){
				if(val){
					this.topPage++;
				}
				this.$my.post('/index/Product/getPlatformTypeProductWeekNew',{page:this.topPage,limit:10,platform_type_id:this.id}).then(res=>{
					 if(res.code==200){
						 if(res.data.data.length>0){
							 this.topList= this.topList.concat(res.data.data)
						 }else{
							 this.topList=res.data.data
						 }
					 }
				})
			},
			getList(val){
				if(val){
					console.log(val)
					this.page=1;
					this.list=[];
					this.tabsActive=val.index;
				}
				this.$my.post('/index/Product/getPlatformTypeProductNew',{page:this.page,limit:10,platform_type_id:this.id,category_id:this.tabs[this.tabsActive].store_category_id}).then(res=>{
					if(res.code==200 && res.data.data.length>0){
						this.list=this.list.concat(res.data.data)
					}
				})
			},
			getTabs(){ 
				this.$my.post('/index/Product/getPlatFormTypeProductType',{platform_type_id:this.id}).then(res=>{
					 if(res.code==200){
						this.tabs=res.data
						this.getList()
					 }
				})
			}
		},
		onLoad(option) {
			this.id=option.id?option.id:1
			this.getTopList()// 每周精选列表
			this.getTabs()//获取分类
		},
		data() {
			return {
				topPage:1,
				page:1,
				topList:[],
				list:[],
				id:0,// 分类id
				tabsActive: 0, //tabs当前项
				activeSwiper: 1, //当前播放第几张
				tabs: []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.week {
		padding: 5rpx 10rpx;
		background: linear-gradient(97.47deg, rgba(217, 217, 217, 0) 6%, rgba(221, 203, 186, 0.541493) 32.36%, #E1BFA0 96.64%);
		border-radius: 10rpx 0rpx;
	}

	.newsBox {
		width: 100%;
		background-color: rgba(255, 255, 255, 0.3);
		// margin-top: 120rpx;
		border-radius: 20rpx;
	}
	.lisBox { 
		width: 100%;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		background: linear-gradient(#fff 0.5%, #f5f5f5 100%);
		margin-top: -60rpx;
	}
	.headerBox {
		padding-bottom: 100rpx;
		padding-top: 40rpx;
		background: linear-gradient(49.92deg, #C39573 0%, #FEE6CA 100%);
	}
</style>
